<template>
	<view class="my-info-main">
		<view class="top">
			<view class="top-left" @click="back">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
			<view class="top-center">
				我的信息
			</view>
			<view></view>
		</view>
		<view class="info-content">
			<view class="my-avatar">
				<image :src="myInfo.avatar" mode="aspectFill" @click="clickAvatar"></image>
			</view>
			<view class="name-sign">
				<view class="name-view">
					<view class="name-text">
						名字
					</view>
					<view class="name-value" @click="openPopup(1)">
						{{myInfo.name}}
					</view>
					<view class="icon-view" @click="openPopup(1)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						背景图
					</view>
					<view class="bg-view-info" @click="openPopup(2)">
						<image :src="myInfo.BgImg" mode="aspectFill"></image>
					</view>
					<view class="icon-view" @click="openPopup(2)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						签名
					</view>
					<view class="name-value" @click="openPopup(3)">
						<input placeholder="请填写你的签名" disabled="true" v-if="myInfo.sign === ''" />
						{{myInfo.sign}}
					</view>
					<view class="icon-view" @click="openPopup(3)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						简介
					</view>
					<view class="name-value" @click="openPopup(4)">
						<input placeholder="请填写你的简介" disabled="true" v-if="myInfo.briefIntroduction === ''" />
						{{myInfo.briefIntroduction}}
					</view>
					<view class="icon-view" @click="openPopup(4)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
			</view>
			<view class="name-sign">
				<view class="name-view">
					<view class="name-text">
						性别
					</view>
					<view class="name-value" @click="openPopup(5)">
						<input placeholder="请选择性别" disabled="true" v-if="myInfo.gender === ''" />
						{{myInfo.gender}}
					</view>
					<view class="icon-view" @click="openPopup(5)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						生日
					</view>
					<view class="name-value" @click="openPopup(6)">
						<input placeholder="请填写你的生日" disabled="true" v-if="myInfo.birth === ''" />
						{{myInfo.birth}}
					</view>
					<view class="icon-view" @click="openPopup(6)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						地区
					</view>
					<view class="name-value" @click="openPopup(7)">
						<input placeholder="请选择地区" disabled="true" v-if="myInfo.area === ''" />
						{{myInfo.area}}
					</view>
					<view class="icon-view" @click="openPopup(7)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						职业
					</view>
					<view class="name-value" @click="openPopup(8)">
						<input placeholder="请填写职业" disabled="true" v-if="myInfo.career === ''" />
						{{myInfo.career}}
					</view>
					<view class="icon-view" @click="openPopup(8)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
				<divider-line :width="100"></divider-line>
				<view class="name-view">
					<view class="name-text">
						学校
					</view>
					<view class="name-value" @click="openPopup(9)">
						<input placeholder="请选择学校" disabled="true" v-if="myInfo.school === ''" />
						{{myInfo.school}}
					</view>
					<view class="icon-view" @click="openPopup(9)">
						<uni-icons type="right" size="20" color="#7f7f7f"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :mask-click="false">
			<view class="popup-main">
				<view class="close-pop-view">
					<uni-icons type="closeempty" size="26" @click="closePop"></uni-icons>
				</view>

				<!-- 名字 -->
				<view class="name-pop" v-if="popCurrent === 1">
					<view class="mistake-tip">
						{{mistakeText}}
					</view>
					<uni-easyinput prefixIcon="staff" :styles="nameInputStyle" v-model="myInfo.name" placeholder="请输入名字"
						primaryColor="#66596b" @blur="checkName" @clear="clearHandler">
					</uni-easyinput>
					<view class="input-tips">
						请设置2-12个字符，不包括@<>/等无效字符。
					</view>
				</view>

				<!-- 签名 -->
				<view class="sign-view" v-if="popCurrent === 3">
					<view class="mistake-tip">
						{{signMistakeText}}
					</view>
					<uni-easyinput type="textarea" autoHeight v-model="myInfo.sign" placeholder="请输入内容" @blur="signBlur"
						:styles="nameInputStyle" primaryColor="#66596b">
					</uni-easyinput>
					<text class="font-num">{{myInfo.sign.length}}/50</text>
				</view>

				<!-- 简介 -->
				<view class="sign-view" v-if="popCurrent === 4">
					<view class="mistake-tip">
						{{briefInfoMisText}}
					</view>
					<uni-easyinput type="textarea" autoHeight v-model="myInfo.briefIntroduction" placeholder="请输入内容"
						@blur="briefInfoInputBlur" :styles="nameInputStyle" primaryColor="#66596b">
					</uni-easyinput>
					<text class="font-num">{{myInfo.briefIntroduction.length}}/100</text>
				</view>

				<!-- 性别 -->
				<view class="genger-view" v-if="popCurrent === 5">
					<view class="gender-item">
						<view class="gender-man" @click="myInfo.gender='男'">
							<view class="gender-man-text">
								男
							</view>
							<view class="gender-man-icon">
								<uni-icons type="checkmarkempty" size="25" color="#66596b"
									v-if="myInfo.gender === '男'"></uni-icons>
							</view>
						</view>
						<divider-line :width="100" :color="'#eeeeee'"></divider-line>
						<view class="gender-man" @click="myInfo.gender='女'">
							<view class="gender-man-text">
								女
							</view>
							<view class="gender-man-icon">
								<uni-icons type="checkmarkempty" size="25" color="#66596b"
									v-if="myInfo.gender === '女'"></uni-icons>
							</view>
						</view>
					</view>
					<view class="question">
						是否公开展示
					</view>
					<view class="switch-view">
						<view class="show-gender">
							展示性别标签
						</view>
						<view class="show-gender-switch">
							<switch :checked="isShowGender" color="#66596b" @change="changeGenderSwitch" />
						</view>
					</view>
				</view>

				<!-- 生日 -->
				<view class="birth-view" v-if="popCurrent === 6">
					<view class="birth-info">
						<view class="birth-text">
							生日
						</view>
						<view class="birth-date-selecter">
							<uni-datetime-picker type="date" :border="false" v-model="myInfo.birth" />
						</view>
					</view>
					<view class="question-birth">
						是否公开展示
					</view>
					<view class="switch-view">
						<view class="show-gender">
							展示生日标签
						</view>
						<view class="show-gender-switch">
							<switch :checked="isShowBirthLaber" color="#66596b" @change="changeBirthSwitch" />
						</view>
					</view>
					<view class="birth-label-show-type" v-show="isShowBirthLaber">
						<view class="show-age" @click="birthLabelShowType='年龄'">
							<view class="show-age-text">
								展示年龄
							</view>
							<view class="show-age-right">
								<uni-icons type="checkmarkempty" size="25" color="#66596b"
									v-if="birthLabelShowType==='年龄'"></uni-icons>
							</view>
						</view>
						<divider-line :width="100" :color="'#eeeeee'"></divider-line>
						<view class="show-age" @click="birthLabelShowType='星座'">
							<view class="show-age-text">
								展示星座
							</view>
							<view class="show-age-right">
								<uni-icons type="checkmarkempty" size="25" color="#66596b"
									v-if="birthLabelShowType==='星座'"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<!-- 地区 -->
				<view class="area-view" v-if="popCurrent === 7">
					<view class="area-select">
						<view class="area-text">
							地区
						</view>
						<view class="area-select-view">
							<uni-data-picker placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="areaData"
								v-model="myInfo.area" @change="onchange" :border="false">
							</uni-data-picker>
						</view>
					</view>
					<view class="question-birth">
						是否公开展示
					</view>
					<view class="switch-view">
						<view class="show-gender">
							展示地区标签
						</view>
						<view class="show-gender-switch">
							<switch :checked="isShowAreaLabel" color="#66596b" @change="changeAreaSwitch" />
						</view>
					</view>
				</view>

				<!-- 职业 -->
				<view class="career" v-if="popCurrent === 8">
					<uni-easyinput prefixIcon="staff" :styles="nameInputStyle" v-model="myInfo.career"
						placeholder="请输入你的职业" primaryColor="#66596b">
					</uni-easyinput>
					<view class="question-birth">
						是否公开展示
					</view>
					<view class="switch-view">
						<view class="show-gender">
							展示职业标签
						</view>
						<view class="show-gender-switch">
							<switch :checked="isShowCareerLabel" color="#66596b" @change="changeCareerSwitch" />
						</view>
					</view>
				</view>

				<!-- 学校 -->
				<view class="career" v-if="popCurrent === 9">
					<uni-easyinput prefixIcon="staff" :styles="nameInputStyle" v-model="myInfo.school"
						placeholder="请输入你的学校名称" primaryColor="#66596b">
					</uni-easyinput>
					<view class="question-birth">
						是否公开展示
					</view>
					<view class="switch-view">
						<view class="show-gender">
							展示学校标签
						</view>
						<view class="show-gender-switch">
							<switch :checked="isShowSchoolLabel" color="#66596b" @change="changeSchoolSwitch" />
						</view>
					</view>
				</view>

				<view class="confirm-btn" @click="saveUpdate">
					<button type="default">保存修改</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>

	import areaArray from '@/common/area.js';
	import DividerLine from '@/components/common-components/DividerLine.vue';
	import {
		client
	} from '@/request/alioss';
	import {
		updateAvatar,
		getUserAllInfoInSetting
	} from '@/request/user.js';
	
	import { uploadOss  } from '@/common/upload-oss/upload.js';
	import { updateUserBg } from '@/request/upload.js';
	
	export default {
		components: {
			DividerLine
		},
		data() {
			return {
				isShowSchoolLabel: false,
				isShowCareerLabel: false,
				isShowAreaLabel: false,
				areaData: areaArray,
				birthLabelShowType: '年龄',
				isShowBirthLaber: false,
				isShowGender: false,
				briefInfoMisText: '',
				signMistakeText: '',
				mistakeText: '', // 错误提示
				popCurrent: 0,
				myInfo: {
					BgImg: 'https://b0.bdstatic.com/83a341f6a7565eb8232389450e94cf99.jpg@h_1280',
					school: '', // 学校
					career: '', // 职业
					area: '', // 地区
					birth: '',
					briefIntroduction: '🎈摄影小白📷，旅行爱好者✈️。用镜头捕捉美好瞬间，以脚步丈量世界角落。分享生活碎片，期待与你在小红书共赴多彩旅程。',
					gender: '男',
					sign: '逆风如解意，多赚人民币。',
					name: '疆屿用户27343',
					avatar: 'https://img1.baidu.com/it/u=660289296,2133643174&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
				},
				nameInputStyle: {
					borderColor: '#66596b'
				},
			}
		},

		onLoad() {
			this.getUserAllInfoInSettingFunc();
		},

		methods: {

			getUserAllInfoInSettingFunc() {
				getUserAllInfoInSetting().then(res => {
					// console.log(res);
					this.myInfo = res.data.data;
				})
			},

			back() {
				uni.navigateBack()
			},

			// 点击头像上传
			clickAvatar() {
				const that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async function(res) {
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
						const filePath = tempFilePaths[0];
						console.log(filePath);
						// const fileType = filePath.substring(filePath.lastIndexOf("."))
						// console.log(fileType);
						const userName = uni.getStorageSync('userName');
						const timestamp = new Date().getTime();
						that.myInfo.avatar = filePath

						// 上传文件到oss
						// #ifndef APP-PLUS
						const fileName =
							`/app/my/image/avatar/${userName}_avatar_${timestamp}${res.tempFiles[0].name}`;
						client().then(async ossClient => {
							const uploadToOssResult = await ossClient.multipartUpload(fileName, res.tempFiles[0]);
						})

						// #endif

						// #ifdef APP-PLUS
						const filePathForce = 'app/my/image/avatar/';
						console.log("文件路径：", filePath);
						const fileName = await uploadOss({
							filePathFore: filePathForce,
							filePath: filePath
						});
						console.log("文件URL：", fileName);
						// #endif

						// 请求后端更改头像
						const data = {
							avatar: fileName
						}
						console.log("data: ", data);
						updateAvatar(data).then(resData => {
							if (resData.data.code === 10000) {
								uni.showToast({
									title: '更改头像成功',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '更改头像失败！请稍后再试...',
									icon: 'none'
								})
							}
						})
					}
				})
			},


			// 点击打开弹窗
			openPopup(index) {
				this.popCurrent = index;
				if (this.popCurrent === 2) {
					const that = this;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async function(res) {
							const tempFilePaths = res.tempFilePaths;
							const filePath = tempFilePaths[0];
							console.log(JSON.stringify(res.tempFilePaths));
							that.myInfo.BgImg = res.tempFilePaths[0]
							// 上传文件到oss
							// #ifndef APP-PLUS
							const fileName =
								`/app/my/image/personalBg/${userName}_avatar_${timestamp}${res.tempFiles[0].name}`;
							client().then(async ossClient => {
								const uploadToOssResult = await ossClient.multipartUpload(fileName, res.tempFiles[0]);
							})
							
							// #endif
							
							// #ifdef APP-PLUS
							const filePathForce = 'app/my/image/personalBg/';
							console.log("文件路径：", filePath);
							const userBg = await uploadOss({
								filePathFore: filePathForce,
								filePath: filePath
							});
							console.log("文件URL：", userBg);
							// #endif
							
							// 上传后端背景图片的URL
							const data = {
								userBg: userBg
							}
							console.log("data: ", data);
							updateUserBg(data).then(resData => {
								if (resData.data.code === 10000) {
									uni.showToast({
										title: '更换背景成功',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '更换背景成功！请稍后再试...',
										icon: 'none'
									})
								}
							})
						}
					});
				} else {
					this.$refs.popup.open()
				}
			},

			// 点击遮罩层
			clickMask() {
				console.log("点击");
				this.$refs.popup.open();
			},

			// 关闭弹窗
			closePop() {
				this.$refs.popup.close()
			},

			// 保存修改
			saveUpdate() {
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					duration: 1000
				})
				this.$refs.popup.close()
			},

			// 检查用户名合法性
			checkName() {
				if (this.myInfo.name.trim() === '') {
					this.mistakeText = '用户名不能为空'
				} else if (this.myInfo.name.trim().length < 2 || this.myInfo.name.trim().length > 12) {
					this.mistakeText = '用户名长度只能为2-12个字';
				} else if (this.myInfo.name.trim().includes("@") || this.myInfo.name.trim().includes("<>") ||
					this.myInfo.name.trim().includes("/")) {
					this.mistakeText = '用户名不能包含：@，<>，/ 等特殊字符'
				} else {
					this.mistakeText = '';
				}
			},

			// 点击清空图标时触发
			clearHandler() {
				this.mistakeText = '用户名不能为空'
			},
			signBlur() {
				console.log(this.myInfo.sign.length);
				if (this.myInfo.sign.length > 50) {
					this.signMistakeText = '签名不能超过50字'
				} else {
					this.signMistakeText = ''
				}
			},
			briefInfoInputBlur() {
				if (this.myInfo.briefIntroduction.length > 100) {
					this.briefInfoMisText = '签名不能超过100字'
				} else {
					this.briefInfoMisText = ''
				}
			},
			changeBirthSwitch(e) {
				this.isShowBirthLaber = e.detail.value
			},
			changeGenderSwitch(e) {
				this.isShowGender = e.detail.value
			},
			changeAreaSwitch(e) {
				this.isShowAreaLabel = e.detail.value
			},
			changeCareerSwitch(e) {
				this.isShowCareerLabel = e.detail.value
			},
			changeSchoolSwitch(e) {
				this.isShowSchoolLabel = e.detail.value
			},
			onchange(e) {
				let selectAreaArr = e.detail.value;
				if (selectAreaArr.length > 0) {
					this.myInfo.area = selectAreaArr[0].text + '/' + selectAreaArr[1].text + '/' +
						selectAreaArr[2].text
					console.log(this.myInfo.area);
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.my-info-main {
		.top {
			width: 100%;
			padding-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f8f8f8;
			padding-bottom: 30rpx;
			position: fixed;
			top: 0;
			z-index: 1;

			.top-left {
				margin-left: 30rpx;
			}

			.top-center {
				margin-right: 60rpx;
				font-size: 36rpx;
			}
		}

		.info-content {
			margin-top: 180rpx;
			width: 100%;
			margin-bottom: 50rpx;

			.my-avatar {
				text-align: center;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
			}

			.name-sign {
				width: 80%;
				margin-left: auto;
				margin-right: auto;
				background-color: #fff;
				margin-top: 40rpx;
				padding: 30rpx;
				box-shadow: 0 0 10px 10px rgba(211, 211, 211, 0.6);

				.name-view {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name-text {
						width: 140rpx;
						font-size: 30rpx;
						color: #7f7f7f;
					}

					.bg-view-info {
						width: 70%;
						display: flex;

						image {
							width: 120rpx;
							height: 100rpx;
							border-radius: 10rpx;
						}
					}

					.name-value {
						width: 70%;
						font-size: 32rpx;
						display: flex;
					}

					.icon-view {}
				}
			}
		}

		.popup-main {
			width: 100%;
			height: 70vh;
			border-radius: 10px 10px 0 0;
			background-color: #f8f8f8;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.close-pop-view {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				justify-content: flex-end;
				padding-top: 30rpx;
			}

			.name-pop {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 40rpx;
				// background-color: #66596b;

				.mistake-tip {
					color: red;
					font-size: 25rpx;
					margin-bottom: 20rpx;
					margin-left: 20rpx;
				}

				.input-tips {
					margin-top: 30rpx;
					font-size: 25rpx;
					color: #999999;
				}
			}

			.genger-view {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 40rpx;

				.gender-item {
					background-color: #fff;
					padding: 30rpx;
					width: 85%;
					border-radius: 10rpx;
					margin-left: auto;
					margin-right: auto;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);

					.gender-man {
						height: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.gender-man-text {}

						.gender-man-icon {}
					}
				}

				.question {
					margin-top: 50rpx;
					color: #7f7f7f;
					font-size: 25rpx;
					letter-spacing: 3rpx;
				}

				.switch-view {
					margin-top: 15rpx;
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;

					.show-gender {}

					.show-gender-switch {}
				}
			}

			.birth-view {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20rpx;

				.birth-info {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;

					.birth-text {}

					.birth-date-selecter {}
				}

				.question-birth {
					margin-top: 50rpx;
					color: #7f7f7f;
					font-size: 25rpx;
					letter-spacing: 3rpx;
				}

				.switch-view {
					margin-top: 15rpx;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;

					.show-gender {}

					.show-gender-switch {}
				}

				.birth-label-show-type {
					margin-top: 30rpx;
					padding: 30rpx;
					border-radius: 10rpx;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					background-color: #fff;

					.show-age {
						display: flex;
						justify-content: space-between;
						height: 30rpx;
						align-items: center;
					}
				}
			}

			.sign-view {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 40rpx;

				.font-num {
					font-size: 20rpx;
					color: #7f7f7f;
				}

				.mistake-tip {
					color: red;
					font-size: 25rpx;
					margin-bottom: 20rpx;
					margin-left: 20rpx;
				}

			}

			.area-view {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20rpx;

				.area-select {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;

					.area-text {}

					.area-select-view {
						width: 70%;
					}
				}

				.switch-view {
					margin-top: 15rpx;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;
				}

				.question-birth {
					margin-top: 50rpx;
					color: #7f7f7f;
					font-size: 25rpx;
					letter-spacing: 3rpx;
				}
			}

			.career {
				width: 80%;
				min-height: 65%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20rpx;

				.question-birth {
					margin-top: 50rpx;
					color: #7f7f7f;
					font-size: 25rpx;
					letter-spacing: 3rpx;
				}

				.switch-view {
					margin-top: 15rpx;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-shadow: 0 0 10px 10px rgba(223, 223, 223, 0.6);
					border-radius: 10rpx;
					background-color: #fff;
				}
			}

			.confirm-btn {
				margin-bottom: 80rpx;

				button {
					width: 80%;
					background-color: #66596b;
					border-radius: 40rpx;
					color: #fff;
					letter-spacing: 3rpx;
				}
			}
		}

	}
</style>